<template>
  <div class="shop-photo">
    <van-nav-bar
      class="shop-nav"
      title="店铺实体图片"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form v-if="!isUpdate" @submit="onSubmit">
      <van-field
        name="uploader"
        label="店铺实体图像"
        :rules="[{ required: true, message: '请填上传图像' }]"
      >
        <template #input>
          <van-uploader multiple v-model="imageList" :max-count="5" />
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button class="submitBtn" round block type="info" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>

    <div v-if="isUpdate">
      <div class="updata-shop-image">修改店铺图片</div>
      <van-uploader
        :before-delete="beforeDelete"
        :before-read="beforeRead"
        v-model="updateImageList"
        :max-count="5"
      />
    </div>

    <div style="margin: 16px;">
      <van-button
        class="next"
        round
        block
        type="info"
        native-type="button"
        :to="`/shop-delivery/${shopId}`"
      >
        下一步
      </van-button>
    </div>
  </div>
</template>

<script>
import { addShopImage, getShopImage, addOneShopImage, deleteOneShopImage } from '@/api/shop'
export default {
  name: 'ShopPhoto',
  props: {
    shopId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      imageList: [],
      updateImageList: [],
      isUpdate: false
    }
  },
  created() {
    this.getShopImage()
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.addShopImage()
    },
    async addShopImage() {
      const formData = new FormData()
      this.imageList.forEach(image => {
        formData.append('imageList', image.file)
      })
      this.$toast.loading({
        message: '提交中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await addShopImage(this.shopId, formData)
      if (res.meta.status === 200) {
        this.$toast.success('操作成功')
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    async getShopImage() {
      const { data: res } = await getShopImage(this.shopId)
      if (res.meta.status === 200) {
        this.updateImageList = []
        res.data.forEach(file => {
          file.url = file.image_url
          this.updateImageList.push(file)
        })
        if (this.updateImageList.length > 0) {
          this.isUpdate = true
        }
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    async beforeRead(file) {
      console.log(file)
      const formData = new FormData()
      formData.append('image', file)
      const { data: res } = await addOneShopImage(this.shopId, formData)
      if (res.meta.status === 200) {
        this.getShopImage()
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    async beforeDelete(val) {
      const { data: res } = await deleteOneShopImage(val.shop_image_id)
      if (res.meta.status === 200) {
        this.getShopImage()
      } else {
        this.$toast.fail(res.meta.msg)
      }
    }
  }
}
</script>

<style scoped lang="less">
.shop-photo {
  /deep/.shop-nav {
    background: #008bfa;
    .van-nav-bar__text,
    .van-nav-bar__title,
    .van-icon {
      color: #fff;
    }
  }
  .submitBtn {
    margin-bottom: 20px;
  }
  .updata-shop-image {
    font-size: 40px;
    text-align: center;
    padding: 30px 0;
    color: #ccc;
  }
}
</style>
